<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>发表评论</title>

<!--		<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">-->
<!--		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">-->

<!--		<link href="css/personal.css" rel="stylesheet" type="text/css">-->
<!--		<link href="css/orstyle.css" rel="stylesheet" type="text/css">-->

<!--		<script src="AmazeUI-2.4.2/assets/js/jquery.min.js"></script>-->
<!--		<script src="AmazeUI-2.4.2/assets/js/amazeui.js"></script>-->
<!--		&lt;!&ndash;自定义工具&ndash;&gt;-->
		<script src="js/HttpUtil.js"></script>
<!--		&lt;!&ndash;导入vue 包&ndash;&gt;-->
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="js/Data.js"></script>
<!--		<script src="js/jquery.js"></script>-->
		<link href="./AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="./css/personal.css" rel="stylesheet" type="text/css">
		<link href="./css/appstyle.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd" id="AA">
									<a href="login.html" target="_top" class="h" id="a1">亲，请登录</a>
									<a href="register.html" target="_top" id="a2">免费注册</a>
								</div>
							</div>
						</ul>
						<ul class="message-r">
							<div class="topMessage home">
								<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
							</div>
							<div class="topMessage my-shangcheng">
								<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
							</div>
							<div class="topMessage mini-cart">
								<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
							</div>
							<div class="topMessage favorite">
								<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
							</div>
						</ul>
						</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="./images/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form>
									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
									<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
								</form>
							</div>
						</div>

						<div class="clear"></div>
					</div>
				</div>
			</article>
		</header>
            <div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
								<li class="index"><a href="#">首页</a></li>
                                <li class="qc"><a href="#">闪购</a></li>
                                <li class="qc"><a href="#">限时抢</a></li>
                                <li class="qc"><a href="#">团购</a></li>
                                <li class="qc last"><a href="#">大包装</a></li>
							</ul>
						    <div class="nav-extra">
						    	<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
						    	<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
						    </div>
						</div>
			</div>
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-comment" id="div_vue">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">发表评论</strong> / <small>Make&nbsp;Comments</small></div>
						</div>
						<hr/>

						<div class="comment-main" v-for="goods in goodsList">
							<div class="comment-list">
								<div class="item-pic">
									<a href="#" class="J_MakePoint">
										<img :src="goods.imgUrl" class="itempic">
									</a>
								</div>

								<div class="item-title">

<!--									<div class="item-name">-->
<!--										<a href="#">-->
<!--											<p class="item-basic-info">{{goods.goodsName}}</p>-->
<!--										</a>-->
<!--									</div>-->
									<p class="item-basic-info">{{goods.goodsName}}</p>
									<div class="item-info">
										<div class="item-price"style="font-size: 8px;">
											价格：<strong>{{goods.price}}</strong>元
										</div>										
									</div>
								</div>
								<div class="clear"></div>
								<div class="item-comment">
									<textarea placeholder="请写下对宝贝的感受吧，对他人帮助很大哦！" v-on:input="comment" ></textarea>
								</div>
<!--								<div class="filePic">-->
<!--									<input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*" >-->
<!--									<span>晒照片(0/5)</span>-->
<!--									<img src="./images/image.jpg" alt="">-->
<!--								</div>-->
								<div class="item-opinion">
									<li><i class="op1" @click="evaluate(5)"></i>好评</li>
									<li><i class="op2" @click="evaluate(3)"></i>中评</li>
									<li><i class="op3" @click="evaluate(1)"></i>差评</li>
								</div>
							</div>
								<div class="info-btn">
									<div class="am-btn am-btn-danger" @click="publish(goods.id)">发表评论</div>
								</div>							
<!--					<script type="text/javascript">-->
<!--						$(document).ready(function() {-->
<!--							$(".comment-list .item-opinion li").click(function() {-->
<!--								$(this).prevAll().children('i').removeClass("active");-->
<!--								$(this).nextAll().children('i').removeClass("active");-->
<!--								$(this).children('i').addClass("active");-->

<!--							});-->
<!--				     })-->
<!--					</script>-->

						</div>

					</div>

				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">恒望科技</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于恒望</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="../information.html">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="address.html">地址管理</a></li>
							<li> <a href="cardlist.html">快捷支付</a></li>
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order.html">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
							<li> <a href="comment.html">评价商品</a></li>
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-dollar"></i>我的资产</p>
						<ul>
							<li> <a href="points.html">我的积分</a></li>
							<li> <a href="coupon.html">优惠券 </a></li>
							<li> <a href="bonus.html">红包</a></li>
							<li> <a href="walletlist.html">账户余额</a></li>
							<li> <a href="bill.html">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
							<li> <a href="foot.html">足迹</a></li>	
						</ul>
					</li>

					<li class="person">
						<p><i class="am-icon-qq"></i>在线客服</p>
						<ul>
							<li> <a href="consultation.html">商品咨询</a></li>
							<li> <a href="suggest.html">意见反馈</a></li>							
							
							<li> <a href="news.html">我的消息</a></li>
						</ul>
					</li>
				</ul>

			</aside>
		</div>

	</body>

</html>

<script>
	$(function () {
		OnDisplay();
	});

	const vue =new Vue({
		el: '#div_vue',
		data: {
			name:sessionStorage.userName,
			//根据地址栏 获取订单id，
			id:window.location.search.substring(9),
			goodsList:[],
			comment1: "",   //评论内容
			evaluate1: 5   //评分
		},
		//过滤器
		filters: {
			//时间格式化
			formatDate(value) {
				if (value != null) {
					let date = new Date(value);
					let y = date.getFullYear();
					let MM = date.getMonth() + 1;
					MM = MM < 10 ? ('0' + MM) : MM;
					let d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					let h = date.getHours();
					h = h < 10 ? ('0' + h) : h;
					let m = date.getMinutes();
					m = m < 10 ? ('0' + m) : m;
					let s = date.getSeconds();
					s = s < 10 ? ('0' + s) : s;
					return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				} else {
					return null
				}
			}
		},

		methods: {
			commentGoods: function () {
				let  thisObj = this;
				let url = "comment/inquiry";
				let param = {orderId:this.id};
				getWithParams(url,param,function (data) {
					console.log(data);
					thisObj.goodsList = data;
				})
			},

			//修改评分
			evaluate:function (i) {
				this.evaluate1 = i;
			},
			//修改评论内容
			comment:function(event){
				this.comment1 = event.target.value;
			},


			//发布评论内容
			publish(id){
				let url = "comment/particulars";
				console.log(this.evaluate1); //商品评级
				console.log(this.comment1);  //商品评价详情
				console.log(this.name);  //用户名
				console.log(id); //商品id
				let param = {
					userName:this.name,
					goodsId:this.id,
					satisfaction:this.evaluate1,
					evaluate:this.comment1
				};
				postWithParams(url,param,function () {
					console.log("=====================")
				})
			}
		},
		mounted: function () {
			this.commentGoods()
		}
	});
</script>
